<template lang="html">
  <div class="ar-lists" ref="tableList" @scroll="scrollLists">
    <div class="lists-box" :style="{
      paddingTop: paddingTop +'px',
    }">
      <ul class="lists" v-for="(lists,index) in allData" :key="index">
        <li v-for="(item,ind) in lists" :key="ind">{{item}}</li>
      </ul>
    </div>
  </div>
</template>
<script>
  import _debounce from 'lodash/debounce'

  export default {
    data() {
      return {
        allData: [],
        paddingTop: 0
      }
    },
    created() {
      this.distance = 30 // 加载个数
      this.ulHeight = 0 // 单个ul高度
      this.currentPage = 1 // 上一刻的页码
      this.scrollTopPosition = 0 // 上一刻的滚动高度
      this.isScrollDown = true // 滚动方向
    },
    async mounted() {
      // 初始化加载2页
      await this.queryListData(1)
      await this.queryListData(2)
      this.ulHeight = document.querySelector('.lists').clientHeight
    },
    methods: {
      queryListData(page) {
        return new Promise((resovle, reject) => {
          let lists = [],
            from = (page - 1) * this.distance + 1,
            to = page * this.distance
          for (; from <= to; from++) {
            lists.push('这是Item' + from)
          }
          this.isScrollDown ? this.allData.push(lists) : this.allData.unshift(lists)
          resovle(lists)
        })
      },
      scrollLists: _debounce(async function (e) {
        // 父级容器节点
        const listDom = this.$refs['tableList']
        // 容器高度
        const listDomHieght = listDom.clientHeight * 1
        // 判断滚动方向
        this.isScrollDown = listDom.scrollTop - this.scrollTopPosition > 0
        // 父级容器滚动高度
        this.scrollTopPosition = listDom.scrollTop * 1
        console.log(this.scrollTopPosition)
        // 当前滚动页码
        const currentPage = Math.ceil((listDomHieght + this.scrollTopPosition) / this.ulHeight)
        // 向下滚动
        if (this.isScrollDown && currentPage > this.currentPage) {
          this.currentPage = currentPage
          // 如果已经存在3页的数据，则需要删除第一页数据，确保allData只存在3页数据
          if (this.allData.length == 3) {
            this.allData.shift()
            this.paddingTop = (this.currentPage - 2) * this.ulHeight
          }
          // 异步加载下一页数据
          await this.queryListData(currentPage + 1)
        } else if (!this.isScrollDown && currentPage < this.currentPage) {
          // 向上滚动
          if (this.allData.length == 3) {
            this.allData.pop()
            this.paddingTop = this.paddingTop - (this.currentPage - currentPage) * this.ulHeight
          }
          this.currentPage = currentPage
          // 异步加载上一页数据
          if (currentPage > 1) {
            await this.queryListData(currentPage - 1)
          }
        }
      })
    }
  }

</script>
<style scoped lang="less">
  .ar-lists {
    width: 300px;
    height: 600px;
    border: 1px solid #e6e6e6;
    overflow-y: scroll;
    position: relative;
    margin: 100px auto;
    background: #f5f5f5;

    .lists {
      width: 100%;
      display: flex;
      flex-flow: column nowrap;
      padding: 0;
      margin: 0;

      li {
        width: 100%;
        border-bottom: 1px solid #e6e6e6;
        padding: 10px;
        font-size: 14px;
        color: #666;
        list-style: none;
        box-sizing: border-box;
      }
    }
  }

</style>
